
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax图片上传</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
​
<form id="photoForm" class="form-horizontal" action="/photo" method="get" enctype="multipart/form-data">
    {{csrf_field()}}
       <div class="row cl" style="margin-top: 10px;">
                <label class="form-label col-xs-4 col-sm-2" style="text-align: right;">缩略图：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div class="col-sm-10">
                            <input type="file" name="image[]" multiple="multiple" onChange="doUpload()"/>

                        </div>
                    </div>                
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2" style="text-align: right;">预览：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div class="col-sm-10" id="img_box">
                                    
                        </div>
                    </div>                
            </div>            
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"></label>
                <div class="formControls col-xs-8 col-sm-9">
                    <div class="col-sm-10">
                        <button  class="btn btn-primary radius" type="submit" ><i class="Hui-iconfont" >&#xe632;</i>提交</button>

                    </div>
                </div>                
            </div> 
        <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                    <!-- <button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont" >&#xe632;</i>提交</button> -->
                </div>
            </div>              
        </form>
​<script type="text/javascript" src="/admins/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/admins/lib/ueditor/1.4.3/ueditor.config.js"></script>


<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

    
   function doUpload() {
    /*添加csrf——token*/
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' }
    });
        var formData = new FormData($("#photoForm")[0]);
        // var cats_id = $('#cats_id').val();
         // console.log(formData);
        $.ajax({
            url: "/photo",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (returndata) {
                // console.log(returndata);

                var ret =eval("("+returndata+")");
               // var data = JSON.parse(returndata);
                var row='';
                for( var i in ret.data){
                    console.log( ret.data[i]['url']);
                    row += '<img src="'+ ret.data[i]['url']+'" width="100" height="100">'
                    row += '<input type="hidden" name="image[]" value="'+ ret.data[i]['url']+'">';
                }

                $("#img_box").html(row);
            },
            error: function (returndata) {
                console.log(returndata);
            }
        });
    }
</script>
​
</body>
</html>